<template>
  <div class="my">
    <div class="my-head">
      <div class="logo-box">
        <img src="../../assets/images/hwlogo.png">
      </div>
      <h2>{{ realName }}</h2>
      <div class="manage-area">
        <ul>
          <li v-for="item in places" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="repeat-input list">
      <ul>
        <!-- <router-link
          :to="{path:'/repeatPassword'}"
          tag="li"
          class="clearfix">
          <p>修改密码</p>
          <img
            src="../../assets/images/turnRight.svg"
            alt="">
        </router-link> -->
        <router-link
          :to="{path:'/aboutUs'}"
          tag="li"
          class="clearfix">
          <p>关于我们</p>
          <img
            src="../../assets/images/turnRight.svg"
            alt="">
        </router-link>
      </ul>
      <!-- <div class="form-btn exit" @click="exit">退出</div> -->
    </div>
    <footer-tab/>
  </div>
</template>
<script>
import FooterTab from '@/components/footer/footer'
import qs from 'qs'
export default {
  components: {
    FooterTab
  },
  data () {
    return {
      places: [],
      realName: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      let token = sessionStorage.getItem('token')
      let userName = sessionStorage.getItem('userName')
      console.log(userName)
      this.$api.post('/user/userInfo', qs.stringify({
        token: token,
        userName: userName
      })).then((res) => {
        if (res.status === 200) {
          this.places = res.data.regionName
          this.realName = res.data.realName
        }
      })
    })
  },
  methods: {
    exit () {
      this.$router.push('/')
    }
  }
}
</script>
<style lang="scss">
.my {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: -webkit-linear-gradient(#092053, #06050c);
  background: -o-linear-gradient(#092053, #06050c);
  background: -moz-linear-gradient(#092053, #06050c);
  background: linear-gradient(#092053, #06050c);
  .exit {
    width: 94%;
    margin-left: 3%;
    margin-top: 3rem;
    border-radius: .04rem;
    margin-bottom: 2rem;
  }
  .my-head {
    background: #1260f6;
    padding: .60rem 0;
    .logo-box {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: #1c174f;
      margin: 0 auto;
      text-align: center;
      img {
        width: 1.2rem;
        height: 1.33rem;
        margin-top: .35rem;
      }
    }
    h2 {
      font-size: .36rem;
      color: #fff;
      text-align: center;
      line-height: .80rem;
    }
    .manage-area {
      ul {
        text-align: center;
        margin-top: .10rem;
        li {
          padding: .10rem;
          display: inline;
          color: #fff;
          font-size: .24rem;
        }
      }
    }
  }
}

</style>
